<template>
    <div class="shenQ5">
        <div class="box">
            <!--      <div class="top">-->
            <!--        <img src="../assets/img/phoneTop.png" alt="">-->
            <!--        <p>-->
            <!--          <img src="../assets/img/lJianTou.png" alt="" @click="up">-->
            <!--          <span>财产信息</span>-->
            <!--          <span>暂存</span>-->
            <!--        </p>-->
            <!--      </div>-->
            <NavBarTop pageTit="财产信息" :needPhoneTop="false" :needZanC="true"></NavBarTop>
            <div class="content" v-for="(item,index) in infoArray" :key="index">
                <p style="">财产信息{{index+1}}</p>
                <van-field input-align="right" v-model="item.fieldValue1" required is-link readonly label="所有人姓名"
                           placeholder="请选择所有人姓名" @click="handleName(index)"/>

                <van-field input-align="right" v-model="item.fieldValue" required is-link readonly label="财产类别"
                           placeholder="请选择财产类别" @click="handleLB(index)"/>

                <van-field input-align="right" v-model="item.value" label="数量" placeholder="请输入数量"/>
                <van-field input-align="right" v-model="item.value1" label="计量单位" placeholder="请输入计量单位"/>
                <van-field input-align="right" v-model="item.value2" label="总价值（元）" placeholder="请输入总价值（元）"/>
                <!--        <van-button class="btn1">删除</van-button>-->
                <div class="split-line"></div>
            </div>


            <van-popup v-model="show1" round position="bottom">
                <van-cascader v-model="cascaderValue1" title="请选择所有人姓名" :options="options" @close="show1 = false"
                               @finish="onFinish1"/>
            </van-popup>
            <van-popup v-model="show" round position="bottom">
                <van-cascader v-model="cascaderValue"  title="请选择财产类别" :options="options1" @close="show = false"
                              @finish="onFinish"/>
            </van-popup>
            <div class="bottom">
                <van-button class="btn2" icon="plus" @click="add">添加家庭成员信息</van-button>
                <van-button class="btn3" type="primary" @click="next">下 一 步</van-button>
            </div>
        </div>
    </div>
</template>
<script>
    import {Field, Button, Cascader, Popup} from 'vant';
    import NavBarTop from '@/components/navBar.vue'

    export default {
        components: {
            NavBarTop,
            [Field.name]: Field,
            [Button.name]: Button,
            [Cascader.name]: Cascader,
            [Popup.name]: Popup,
        },
        data() {
            return {
                value: '', value1: '', value2: '',
                show: false,
                show1: false,
                fieldValue: '',
                fieldValue1: '',
                activeIndex: 0,
                cascaderValue:'',
                cascaderValue1:'',
                options: [
                    {
                        text: '张三',
                        value:1,
                    },
                    {
                        text: '李四',
                        value:2,
                    }
                ],
                options1: [
                    {
                        text: '银行存款',
                        value:1,
                    },
                    {
                        text: '土地使用权',
                        value:2,
                    },
                    {
                        text: '车辆',
                        value:3,
                    },
                    {
                        text: '有价证券',
                        value:4,
                    },
                    {
                        text: '公司注册股权',
                        value:5,
                    },
                    {
                        text: '异地房产',
                        value:6,
                    },
                    {
                        text: '其他',
                        value:7,
                    }
                ],
                infoArray:[],
            }
        },
        methods: {
            onFinish({selectedOptions}) {
                this.show = false;
                this.infoArray[this.activeIndex].fieldValue = selectedOptions.map((option) => option.text).join('/');
            },
            onFinish1({selectedOptions}) {
                this.show1 = false;
                this.infoArray[this.activeIndex].fieldValue1 = selectedOptions.map((option) => option.text).join('/');
            },
            next() {
                this.$router.push('/ShenQ6')
            },
            up() {
                this.$router.go(-1)
            },
            add(){
                let people = {
                    fieldValue:'',
                    fieldValue1:'',
                    value:'',
                    value1:'',
                    value2:'',
                    cascaderValue:'',
                    cascaderValue1:''
                }
                this.infoArray.push(people)
            },
            handleName(index){
                console.log(index,this.infoArray)
                this.show1 = true
                this.activeIndex = index
                this.cascaderValue1 = this.infoArray[index].fieldValue1
            },
            handleLB(index){
                this.show = true
                this.activeIndex = index
                this.cascaderValue = this.infoArray[index].fieldValue
            }
        }
    }
</script>
<style scoped>
    /** {*/
    /*  margin: 0;*/
    /*  padding: 0;*/
    /*}*/
    p {
        margin: 0;
    }

    .shenQ5 {
        font-size: 0;
    }

    .box {
        width: 3.75rem;
    }

    .top {
        position: relative;
        width: 3.75rem;
        height: 0.88rem;
        background-color: #ffffff;
    }

    .top > img {
        position: absolute;
        width: 3.75rem;
    }

    .content {
        width: 3.75rem;
        background-color: #ffffff;
    }

    .top > p {
        position: absolute;
        font-size: 0.16rem;
        margin-top: 0.5rem;
        text-align: center;
    }

    .top > p > span {
        margin-left: 1.2rem;
    }

    .top > p > img {
        width: 0.08rem;
        height: 0.14rem;
        margin-left: 0.15rem;
    }

    .content > p {
        font-size: 0.14rem;
        padding: .15rem 0;
        margin: 0 0.15rem;
        border-bottom: .01rem solid #ebedf0;
        box-sizing: border-box;
        color: #2D2D2D;
    }

    .btn1 {
        width: 3.45rem;
        height: 0.51rem;
        margin-left: 0.15rem;
        border-radius: 00.32rem;
        background-color: #d4d4d4;
        color: #ffffff;
    }

    .bottom {
        background-color: #ffffff;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }

    .btn2 {
        width: 3.45rem;
        height: 0.51rem;
        border-radius: 0.32rem;
        color: #000000;
        margin-top: .16rem;
    }

    .btn3 {
        width: 3.45rem;
        height: 0.51rem;
        border-radius: 0.32rem;
        background-color: #147bf5;
        margin-top: .16rem;
    }

    .split-line {
        width: 375px;
        height: 6px;
        background: #F2F3F5;
    }
</style>
